<template>
  <div class="home">
    <!-- 首页搜索框 -->
    <van-search
      v-model="SearchVal"
      shape="round"
      placeholder="请输入搜索关键词"
      disabled
      @click="handleClickSearch"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" alt="" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <!-- 黑色遮罩层 -->
    <transition name="van-fade">
      <div class="popup-shadow" v-show="$store.state.isShowPopupShadow"></div>
    </transition>

    <!-- 路由过度效果 -->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { GetHomeData } from "@/request/api";

export default {
  name: "Home",
  data() {
    return {
      SearchVal: "", // 搜索框的v-model值
      banner: [],
    };
  },
  // computed: {
  //   ...mapState({
  //     isShowPopupShadow: (state) => state.showshadow.isShowShadow,
  //   }),
  // },
  created() {
    GetHomeData()
      .then((res) => {
        // console.log("--then中的res是:", res.data.banner);
        this.banner = res.data.banner;
      })
      .catch((err) => {
        console.log("error");
        console.log(err);
      });
  },
  methods: {
    handleClickSearch() {
      this.$router.push("/home/searchPopup");
      // 修改Vuex中的isShowShadow的值，本质上是要调用Vuex中的chanIsShowShadow方法
      this.$store.commit("changeIsShowPopupShadow", true);
    },
  },
  component: {},
};
</script>

<style>
.popup-shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 22;
}
/*.slide-enter,
.slide-leave {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.3s;
}
.slide-enter-to,
.slide-leave-to {
  right: 0;
}*/
</style>